<template>
  <div class="user-info-wrapper">
    <el-card class="box-card opacity" v-loading="loadingComments">
      <template #header>
        最新评论 <i class="em em-loudspeaker"></i>
      </template>
      <div class="index-comment-list">
        <template v-if="commentList&&commentList.length>0">
          <div v-for="comment in commentList" :key="comment" class="comment-item">
            <div class="user-face">
              <div v-if="comment.commentator!=null&&comment.commentator.avatarUrl" class="avatar" style="background: none;">
                <img :src="comment.commentator.avatarUrl" />
              </div>
              <div v-else class="avatar">
              </div>
            </div>
            <div class="comment-con">
              <div class="comment-title">
                {{comment.commentator.name}}
                <small v-if="comment.article"> 在 <router-link :to="{ name:'article', params: { articleId: comment.article.id }}">{{comment.article.title}}</router-link> </small>
              </div>
              <div class="comment-text" v-html="comment.commentContent"></div>
              <div class="comment-info">
                <i class="el-icon-time"></i> {{Utils.formatDate(comment.createTime,'yyyy-MM-dd hh:mm')}} &nbsp;&nbsp;
                <i class="el-icon-thumb" :class="{thumbed : comment.thumbed}" @click="toggleThumb(comment.id)" :id="'thumb_comment_'+comment.id">&nbsp;{{comment.thumbCount}}</i>
              </div>
            </div>
          </div>
        </template>
        <template v-if="!commentList">
          <el-empty description="啥也没有~"></el-empty>
        </template>
      </div>
    </el-card>
    <el-card class="mt-20 opacity">
      <template #header>
        疫情地图 <i class="em em-mask"></i>
      </template>
      <iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" style="height:435px;border: none;width: 100%;"> </iframe>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      this.$axios.get("/api/comment-service/comment/latest", {
        commentType: 'comment',
        limit: 3
      }).then((commentList) => {
        this.commentList = commentList;
        setTimeout(() => {
          this.loadingComments = false;
        }, 1000);
      }).catch(() => {});
      return {
        loadingComments: true,
        commentList: []
      }
    },
    methods: {
      toggleThumb(commentId) {
        let $thumbIcon = $('#thumb_comment_' + commentId);
        const resetIcon = ($thumbIcon) => {
          setTimeout(() => {
            $thumbIcon.removeClass('disabled').find('i.el-icon-loading').remove();
          }, 1000);
        }
        $thumbIcon.addClass('disabled').append('&nbsp;<i class="el-icon-loading"></i>');
        this.$axios.postParamsWithObj('/api/comment-service/comment/toggleComment', {
          commentId: commentId
        }).then((result) => {
          let count = parseInt($thumbIcon.text().trim());
          count = count + result;
          $thumbIcon.html('&nbsp;' + count);
          if (result > 0) {
            $thumbIcon.addClass('thumbed');
          } else if (result < 0) {
            $thumbIcon.removeClass('thumbed');
          }
          resetIcon($thumbIcon);
        }).catch(() => {
          resetIcon($thumbIcon);
        });
      }
    }
  }
</script>